<template>
	<view>
		<view class="top">
				<view class="image-box">
					<uni-file-picker file-mediatype="image" file-extname="png,jpg" :limit="1" disable-preview
						:del-icon="false" :image-styles="imageStyles" v-model="imageValue" fileMediatype="image"
						mode="grid" @select="select">
					</uni-file-picker>
				</view>
		</view>
		<view class="bottom">
			<view class="genghuan">
				点击更换头像
			</view>

			<view class="jieshao">
				<view class="left-box">
					<text>名字</text>
					<text>简介</text>
				</view>
				<view class="right-box">
					<uni-forms ref="form" :rules="rules" :modelValue="user">
						<uni-forms-item name="name">
							<uni-easyinput type="text" v-model="user.name" placeholder="新昵称">
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="jianjie">
							<uni-easyinput type="textarea" v-model="user.jianjie" placeholder="给大家介绍一下自己吧!">
							</uni-easyinput>
						</uni-forms-item>
					</uni-forms>
				</view>
			</view>


			<button type="primary" @click="tijiao">确认修改</button>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				imageStyles: {
					width: 100,
					height: 100,
					border: {
						"color": "#eee", // 边框颜色
						"width": "3px", // 边框宽度
						"style": "solid", // 边框样式
						"radius": "50%" // 边框圆角，支持百分比
					},

				},
				//用户信息
				user: {
					name: ''
				},
				//昵称校验
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '昵称不能为空',
						}],
						validateTrigger: 'submit'
					}
				}
			};
		},
		onLoad() {
			this.user.name = this.userjieshao.name
			this.user.jianjie = this.userjieshao.jianjie
		},
		computed: {
			...mapState('m_user', ['userjieshao'])
		},
		methods: {
			...mapMutations('m_user', ['updatauserimage', 'updatauserjieshao']),
			// 获取上传状态
			select(e) {
				this.updatauserimage(e.tempFiles[0].url)
			},
			//更改用户的个人信息
			updauserinfo() {
				const jieshao = {
					name: this.user.name,
					jianjie: this.user.jianjie
				}
				this.updatauserjieshao(jieshao)
			},
			tijiao(form) {
				this.$refs.form.validate().then(res => {
					this.updauserinfo()
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my'
						})
						uni.$showMsg('修改成功')
					}, 1000)

				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}

		}

	}
</script>

<style lang="scss">
	.top {
		position: relative;
		width: 100%;
		height: 250rpx;
		background-size: cover;
		background-repeat: no-repeat;
		background-image: url(http://5b0988e595225.cdn.sohucs.com/images/20190711/cc73b84657f34e00978eb104030cd4d3.jpeg);

		.image-box {
			position: absolute;
			background-color: white;
			width: 90px;
			height: 90px;
			text-align: center;
			left: 38%;
			top: 70%;
			border-radius: 50%;
			z-index: 200;

		}
	}

	.bottom {
		border-top-left-radius: 9px;
		border-top-right-radius: 9px;
		top: -6px;
		padding: 0 25rpx;
		padding-top: 130rpx;
		text-align: center;
		background-color: white;
		width: 100%;
		position: relative;

		.genghuan {
			color: #303d75;
			font-weight: bold;
			margin-bottom: 50rpx;
		}

		.jieshao {
			display: flex;
			justify-content: space-between;

			.left-box {

				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 15px;
				color: #9a9b9c;
				width: 80rpx;
				height: 163rpx;
				padding-top: 13rpx;

			}

			.right-box {

				width: 80%;
			}

		}
	}

	button {
		width: 300rpx;
	}
</style>
